<template>
    <div>
       
        <div class="tx-fx">
            <div class="tx-dg">
                <van-checkbox @click="kks"  v-model="checked">
                <img ref="msg" :src="`/usericon/${items}.jpg`" alt="">
                <span ref="name" class="tx-name">撒了芬妮</span>
                </van-checkbox>
            </div>
            <!-- <div>{{items}}</div> -->
        </div>
        
    </div>
     
</template>

<script>
import Vue from 'vue';
// import { List } from 'vant';

// Vue.use(List);
import { Checkbox, CheckboxGroup } from 'vant';
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
    export default {
        name:'article-item',
        props:['items'],
        data() {
            return {
               checked : false,
               name:''
            }
        },
        methods: {
            kks() {
                if(this.checked==true){
                   this.name=this.$refs.name.innerText
                    // console.log(this.name);
                    // console.log(this.$refs.msg);
                    // this.$emit('kks',this.name)
                    // console.log(this.name);
                   this.$emit('kks',this.name)
                }else{
                    this.name=''
                    // console.log(this.name);
                    console.log(this.name);
                    
                }
                // this.$emit('kks',this.name)
            },
           
        },
    }
</script>

<style  scoped>
.tx-fx{
   margin: 10px;
}
.tx-dg img{
    width: 50px;
    border-radius: 5px;
}
.tx-name{
    margin: 20px;
    position: absolute;
}
</style>